<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <link href="js/layui/css/layui.css" rel="stylesheet">
    <script type="text/javascript" src="js/layui/layui.all.js"></script>
    <link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div>
    <form class="form-inline" role="form">
        <div class="form-group">
            <label class="" for="param">QPSO超参数值：</label>
            <input type="text" class="form-control" id="param"
                   placeholder="参数使用英文逗号隔开">
        </div>
        <div class="form-group">
            <label class="" for="model">训练模型：</label>
            <input type="text" class="form-control" id="model"
                   placeholder="请输入模型名称">
        </div>
        <input type="button" class="btn btn-dark" onclick="getResult()" value="提交"></input>
    </form>
</div>
<hr/>
<div id="logInfo" style="overflow:auto;">
</div>
</body>
<script>
    $(function () {
        // 自动建立socket连接
        socketServer();
        $("#logInfo").empty();
    });

    function getResult() {
        layer.load(1);
        //此处演示关闭
        setTimeout(function () {
            layer.closeAll('loading');
        }, 2000);

        const params = $('#param').val();
        const model = $('#model').val();
        getData(params, model)
    }


    function socketServer() {
        index = new WebSocket("ws://localhost:14028/webgis/websocket/4");
        //打开事件
        index.onopen = function () {
            console.log("Socket 已打开");
        };
        //获得消息事件
        index.onmessage = function (msg) {
            console.log(msg.data);
            $("#logInfo").append("<span class='logp'>" + msg.data + "</span><br/>");
            document.getElementById("logInfo").scrollIntoView(false)
            //发现消息进入    开始处理前端触发逻辑
        };
        //关闭事件
        index.onclose = function () {
            console.log("Socket已关闭");
        };
        //发生了错误事件
        index.onerror = function () {
            alert("Socket发生了错误");
            //此时可以尝试刷新页面
        }
    }

    function getData(param, model) {
        $.ajax({
            url: "http://127.0.0.1:14028/webgis/njod/predict" + "/4",
            type: "GET",
            async: true,
            data: {"param": param, "model": model},
            success: function (data) {
                layer.msg(data.code);
                console.log('LSTM模型训练完成')
            }
        });
    }
</script>
</html>